<template>
<!-- <van-skeleton title avatar :row="3" :loading="loading" >-->
   <van-card
           v-for="user in userList"
           :tag="user.id"
           :desc="user.profile = user.profile !== null ? user.profile : '此人很懒，未写简介'"
           :title="user.username"
           :thumb="user.avatar?user.avatar:defaultPicture"
           @click="showUser(user.id)"
   >
    <template #tags>
     <van-tag plain type="danger" v-for="tag in user.tags" style="margin-right:10px ">
      {{tag}}
     </van-tag>
    </template>
   </van-card>
    <van-empty description="暂无好友" v-if="!userList || userList.length < 1"/>

<!-- </van-skeleton>-->
</template>

<script setup lang="ts">
 import {ref,onMounted} from 'vue'
 import myAxois from "../plugin/MyAxios";
 import {showFailToast} from "vant";
 import {useRouter} from "vue-router";
 import {defaultPicture} from '../common/userCommand';


 const router = useRouter();
 const userList = ref([])
 onMounted(async () =>{
  let userListData
  const res = await myAxois.get("/user/show/friends");
  if(res.data.code === 0){
   userListData = res.data.data;
   userListData.forEach(user =>{
    if(user.tags){
     user.tags = JSON.parse(user.tags);
    }
   })
   userList.value = userListData;
  }
  else{
   showFailToast("请求失败");
  }
 });

 const showUser = (id:number) =>{
     router.push({
         path:"/user/show",
         query:{
             id
         }
     })
 }


</script>

<style scoped>
</style>